<template>
	<eui-page-frame topHeight="260">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="运营综合视图" color="#000000" rightIcon='' />
				<view>
					<eui-tab :tabStyle="tabstyle" :tabs="tabData" :value="tabIndex" :showBadge="false"
						@change="tabChange"></eui-tab>
				</view>
			</view>
		</template>
		<eui-page-content>
			<view v-if="tabIndex === 0">
				<eui-data-statistics type="ViewReport" :background="themeBgColor"
					:dataList="dataList1"></eui-data-statistics>
				<view style="margin-top: 20rpx;">
					<TableCard title="销售统计" :whereList="whereListData1" :column="column1" :listData="listData1"
						@onSearch="onSearch1">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard title="品牌销售排名" :whereList="whereListData2" :column="column2" :listData="listData2"
						@onSearch="onSearch2">
					</TableCard>
				</view>
			</view>
			<view v-else-if="tabIndex === 1">
				<view class="timeFlex">
					<view>{{ selectTimeText }} {{ selectBeginDate }}~{{ selectEndDate }}</view>
					<eui-uicons size='32' fontFamily="enjoyIcon5" :customPrefix="timeIcon" @click="iconClick" />
				</view>
				<view style="margin-top: 20rpx;">
					<eui-data-statistics type="ViewReport" :background="themeBgColor"
						:dataList="dataList2"></eui-data-statistics>
				</view>
				<eui-base-card title="时段销售趋势" style="margin-top: 20rpx;">
					<!-- 	<eui-echarts :chartStyle="chartStyle" :option="chartOption"></eui-echarts> -->
					<eui-lime-chart :option="chartOption" :chartStyle="chartStyle" />
				</eui-base-card>
				<view style="margin-top: 20rpx;">
					<TableCard title="增长总览排名" :whereList="whereListData3" :column="column3" :listData="listData3"
						@onSearch="onSearch3">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard title="品牌增长排名" :whereList="whereListData4" :column="column4" :listData="listData4"
						@onSearch="onSearch4">
					</TableCard>
				</view>

				<eui-popup ref="timePopup" background-color="#FFFFFF" type="bottom" :mask-click="false">
					<view class="popup-content-message">
						<view class="popup-title">
							<view>时间</view>
							<view class="popup-cancel" @tap="closeDrawer">
								<eui-uicons size='32' fontFamily="enjoyIcon5" customPrefix="icon-guanbi1" />
							</view>
						</view>
					</view>
					<view style="width:100%;height: 1px;background: #EEEEEE;"></view>
					<view class="time-title">选择时间</view>
					<view class="time-all-box">
						<view class="time-fixed-item" :style="[index === 0 ? '' : 'margin-left:8rpx;']"
							:class="{ 'active': timeSelectd === index }" v-for="(item, index) in timeList" :key="index"
							@click.stop="timeFixedClick(index)">
							{{ item.text }}
						</view>
					</view>
					<view class="custom-time-title">自定义时间</view>
					<view class="time-between">
						<view v-if="beginTime === ''" class="time-between-value" @click="selectBeginTime">开始时间</view>
						<view v-else class="time-between-value" style="border-bottom: 2px solid #02B7E6;color:#02B7E6;"
							@click="selectBeginTime">{{ beginTime }}</view>
						<view style="color:#000000;font-size: 30rpx;">至</view>
						<view v-if="endTime === ''" class="time-between-value" @click="selectEndTime">结束时间</view>
						<view v-else class="time-between-value" style="border-bottom: 2px solid #02B7E6;color:#02B7E6;"
							@click="selectEndTime">{{ endTime }}</view>
					</view>

					<picker-view v-if="showBeginPicker" indicator-style="height: 50px;" class="picker-view"
						:value="beginDateProp" @change="beginChange">
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in beginYears" :key="index">{{ item }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in beginMonths" :key="index">{{ item }}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in beginDays" :key="index">{{ item }}</view>
						</picker-view-column>
					</picker-view>
					<picker-view v-if="showEndPicker" indicator-style="height: 50px;" class="picker-view"
						:value="endDateProp" @change="endChange">
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in endYears" :key="index">{{ item }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in endMonths" :key="index">{{ item }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item, index) in endDays" :key="index">{{ item }}</view>
						</picker-view-column>
					</picker-view>
					<view class="popup-bottom flex-1 flex" style="border-radius: 0 0 20rpx 20rpx">
						<eui-button type="max" title="确定" singleTag="确定" @buttonClick="confirm"></eui-button>
					</view>
				</eui-popup>
			</view>

			<view v-else>
				<view>
					<TableCard title="租售比预警" :whereList="whereListData5" :column="column5" :listData="listData5"
						@onSearch="onSearch5">
					</TableCard>
				</view>
				<view style="margin-top: 20rpx;">
					<TableCard title="平效预警" :whereList="whereListData6" :column="column6" :listData="listData6"
						@onSearch="onSearch6">
					</TableCard>
				</view>
			</view>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app";
import TableCard from '@/components/TableCard.vue';
import { useMainStore } from "@/store/modules/store";
import useService from '@/hooks/useService';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
import { convertValue } from '@/hooks/useDefaultValue';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
//主题色
const themeBgColor = ref(theme._object.theme == 'theme-blue' ? "linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)  #FFFFFF" : 'linear-gradient( 135deg, #FF8359 0%, #FF6430 100%)  #FFFFFF');
const apiService = useService({ prefix: "apiApi" });
const fcService = useService({ prefix: "fcApi" });
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const tabData = ref(['销售日报', '销售趋势', '销售预警']);
const tabIndex = ref(0);
const tabstyle = ref({ justifyContent: 'space-around' })
const timePopup = ref(null);
const timeSelectd = ref(0)
const date = ref(new Date())
const beginTime = ref('')
const endTime = ref('')
const showBeginPicker = ref(false);
const showEndPicker = ref(false);
const beginYears = ref([]);
const beginMonths = ref([]);
const beginDays = ref([]);
const endYears = ref([]);
const endMonths = ref([]);
const endDays = ref([]);
const beginYear = ref(date.value.getFullYear())
const beginMonth = ref(date.value.getMonth() + 1)
const beginDay = ref(date.value.getDate())
const endYear = ref(date.value.getFullYear())
const endMonth = ref(date.value.getMonth() + 1)
const endDay = ref(date.value.getDate())
const beginDateProp = ref([beginYear.value - 1990, beginMonth.value - 2, beginDay.value - 1]);
const endDateProp = ref([endYear.value - 1990, endMonth.value - 1, endDay.value - 1]);
const selectTimeText = ref('近一个月');
const selectBeginDate = ref(new Date(beginYear.value + '-' + (beginMonth.value - 1) + '-' + beginDay.value).format('yyyy-MM-dd'));
const selectEndDate = ref(new Date(endYear.value + '-' + endMonth.value + '-' + endDay.value).format('yyyy-MM-dd'));
const timeList = ref([
	{
		value: 0,
		text: '近一个月',
	},
	{
		value: 1,
		text: '近三月',
	},
	{
		value: 2,
		text: '近半年',
	},
	{
		value: 3,
		text: '近一年',
	}
])
const timeIcon = ref('icon-sanjiaojiantouxiangxia')
const dataList1 = ref([
	{
		mode: 'large',
		isTop: true,
		title: '今日销售',
		value: 888888,
		colSpan: 12,
		valueUnit: '',
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '28rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 }
	},
	{
		mode: 'large',
		isTop: true,
		title: '昨日',
		value: 888888,
		colSpan: 12,
		valueUnit: '',
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '28rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	},
	{
		mode: 'small',
		isTop: false,
		title: '同比',
		value: 11,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-shangsheng',
		iconColor: '#00AD60',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	},
	{
		mode: 'small',
		isTop: false,
		title: '环比',
		value: 12,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-xiajiang',
		iconColor: '#FF4000',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// unitStyle: { color: '#ffffff', fontWeight: 600 }
	},
	{
		mode: 'small',
		isTop: false,
		title: '本月销售',
		value: 888888,
		colSpan: 6,
		valueUnit: '',
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// unitStyle: { color: '#FF9400', fontWeight: 600 }
	},
	{
		mode: 'small',
		isTop: false,
		title: '计划达成',
		value: 80,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	}
]);

const dataList2 = ref([
	{
		mode: 'large',
		isTop: true,
		title: '时段总销售',
		value: 888888,
		colSpan: 12,
		valueUnit: '',
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '28rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 }
	},
	{
		mode: 'large',
		isTop: true,
		title: '区间客流',
		value: 888888,
		colSpan: 12,
		valueUnit: '',
		icon: '',
		iconColor: '',
		titleStyle: { color: '#ffffff', fontSize: '28rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	},
	{
		mode: 'small',
		isTop: false,
		title: '同比',
		value: 11,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-shangsheng',
		iconColor: '#00AD60',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	},
	{
		mode: 'small',
		isTop: false,
		title: '环比',
		value: 12,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-xiajiang',
		iconColor: '#FF4000',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// unitStyle: { color: '#ffffff', fontWeight: 600 }
	},
	{
		mode: 'small',
		isTop: false,
		title: '同比',
		value: 11,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-shangsheng',
		iconColor: '#00AD60',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	},
	{
		mode: 'small',
		isTop: false,
		title: '环比',
		value: 12,
		colSpan: 6,
		valueUnit: '%',
		unitStyle: { color: '#ffffff', fontSize: '24rpx', fontWeight: 600 },
		icon: 'icon-shuju-xiajiang',
		iconColor: '#FF4000',
		iconSize: 20,
		titleStyle: { color: '#ffffff', fontSize: '24rpx' },
		largeValueStyle: { color: '#ffffff', fontWeight: 600 },
		smallValueStyle: { color: '#ffffff', fontWeight: 600 },
		// unitStyle: { color: '#ffffff', fontWeight: 600 }
	}
]);
const map = ref({
	'1': '#本年初',
	'2': '#半年初',
	'3': '#本季度初'
})

const whereListData1 = ref([]);
const whereListData2 = ref([]);
const whereListData3 = ref([]);
const whereListData4 = ref([]);
const whereListData5 = ref([
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'c_mode',
		c_width: '90rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ value: '1', text: '业态' }, { value: '2', text: '楼层' }],
		c_showSelector: false
	},
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'c_month',
		c_width: '90rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ value: '1', text: '本年' }, { value: '2', text: '半年' }, { value: '3', text: '本季' }],
		c_showSelector: false
	},
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	}
]);
const whereListData6 = ref([
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'c_mode',
		c_width: '90rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ value: '1', text: '业态' }, { value: '2', text: '楼层' }],
		c_showSelector: false
	},
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'c_month',
		c_width: '90rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ value: '1', text: '本年' }, { value: '2', text: '半年' }, { value: '3', text: '本季' }],
		c_showSelector: false
	},
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	}
]);
const column1 = ref([
	{
		title: '排名', // th标题
		isFixed: true, // 是否固定
		key: 'c_sort', // 对应字段，
		align: 'center',
		width: 1.2, // 宽度 width * 100 rpx,
		slot: 'c_sort',
		slotInfo: {
			type: 'ranking',
		}
	},
	{
		title: '业态', // th标题
		isFixed: false, // 是否固定
		key: 'c_business_type', // 对应字段
		align: 'right',
		width: 1.3,
		//slot: 'b' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_sale_vale', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
	{
		title: '占比(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_pecent', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
	{
		title: '昨日销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_pre_sale_value',
		align: 'right',
		width: 2,
	}
]);
const column2 = ref([
	{
		title: '排名', // th标题
		isFixed: true, // 是否固定
		key: 'c_sort', // 对应字段，
		align: 'center',
		width: 1.2, // 宽度 width * 100 rpx,
		slot: 'c_sort',
		slotInfo: {
			type: 'ranking',
		}
	},
	{
		title: '品牌', // th标题
		isFixed: false, // 是否固定
		key: 'c_brand_name', // 对应字段
		align: 'right',
		width: 1.3,
		//slot: 'b' // 插槽名
	},
	{
		title: '楼层', // th标题
		isFixed: false, // 是否固定
		key: 'c_floor_name', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '铺位', // th标题
		isFixed: false, // 是否固定
		key: 'c_counter_name', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_sale_vale', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
	{
		title: '昨日销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_pre_sale_value',
		align: 'right',
		width: 2,
	}
]);
const column3 = ref([
	{
		title: '排名', // th标题
		isFixed: true, // 是否固定
		key: 'c_sort', // 对应字段，
		align: 'center',
		width: 1.2, // 宽度 width * 100 rpx,
		slot: 'c_sort',
		slotInfo: {
			type: 'ranking',
		}
	},
	{
		title: '业态', // th标题
		isFixed: false, // 是否固定
		key: 'c_business_type', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_sale_vale', // 对应字段
		align: 'right',
		width: 1.4,
		//slot: 'c' // 插槽名
	},
	{
		title: '同比销售', // th标题
		isFixed: false, // 是否固定
		key: 'c_tb_sale_value',
		align: 'right',
		width: 1.6,
	},
	{
		title: '增长(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_growth_rate', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
]);
const column4 = ref([
	{
		title: '排名', // th标题
		isFixed: true, // 是否固定
		key: 'c_sort', // 对应字段，
		align: 'center',
		width: 1.2, // 宽度 width * 100 rpx,
		slot: 'c_sort',
		slotInfo: {
			type: 'ranking',
		}
	},
	{
		title: '品牌', // th标题
		isFixed: false, // 是否固定
		key: 'c_brand_name', // 对应字段
		align: 'right',
		width: 1.3,
		//slot: 'b' // 插槽名
	},
	{
		title: '楼层', // th标题
		isFixed: false, // 是否固定
		key: 'c_floor_name', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '铺位', // th标题
		isFixed: false, // 是否固定
		key: 'c_counter_name', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '销售额', // th标题
		isFixed: false, // 是否固定
		key: 'c_sale_vale', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
	{
		title: '同比销售', // th标题
		isFixed: false, // 是否固定
		key: 'c_tb_sale_value',
		align: 'right',
		width: 1.6,
	},
	{
		title: '增长(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_growth_rate', // 对应字段
		align: 'right',
		width: 1.6,
		//slot: 'c' // 插槽名
	},
]);



const column5 = computed(() => {
	let mode = whereListData5.value.find(x => x.c_col == 'c_mode')?.c_value || '1';
	let column = [
		{
			title: mode === "1" ? '业态' : '楼层', // th标题
			isFixed: true, // 是否固定
			key: 'c_type_name', // 对应字段
			align: 'left',
			width: 1.8,
			//slot: 'b' // 插槽名
		},
		{
			title: '记账月份', // th标题
			isFixed: false, // 是否固定
			key: 'c_acc_mon', // 对应字段
			align: 'left',
			width: 1.6,
			//slot: 'b' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_rent_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '销售额', // th标题
			isFixed: false, // 是否固定
			key: 'c_sale_value', // 对应字段
			align: 'right',
			width: 1.6,
			//slot: 'c' // 插槽名
		},
		{
			title: '租售比', // th标题
			isFixed: false, // 是否固定
			key: 'c_rent_to_sale',
			align: 'right',
			width: 1.5,
		},
		// {
		// 	title: '均值', // th标题
		// 	isFixed: false, // 是否固定
		// 	key: 'c_mean_value', // 对应字段
		// 	align: 'right',
		// 	width: 1.5,
		// 	//slot: 'c' // 插槽名
		// }
	]
	return column;
})


const column6 = computed(() => {
	let mode = whereListData6.value.find(x => x.c_col == 'c_mode')?.c_value || '1';
	let column = [
		{
			title: mode === "1" ? '业态' : '楼层', // th标题
			isFixed: true, // 是否固定
			key: 'c_type_name', // 对应字段
			align: 'left',
			width: 1.8,
			//slot: 'b' // 插槽名
		},
		{
			title: '记账月份', // th标题
			isFixed: false, // 是否固定
			key: 'c_acc_mon', // 对应字段
			align: 'left',
			width: 1.6,
			//slot: 'b' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_rent_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '销售额', // th标题
			isFixed: false, // 是否固定
			key: 'c_sale_value', // 对应字段
			align: 'right',
			width: 1.6,
			//slot: 'c' // 插槽名
		},
		{
			title: '销售平效', // th标题
			isFixed: false, // 是否固定
			key: 'c_sale_psm',
			align: 'right',
			width: 1.6,
		},
		// {
		// 	title: '均值', // th标题
		// 	isFixed: false, // 是否固定
		// 	key: 'c_mean_value', // 对应字段
		// 	align: 'right',
		// 	width: 1.5,
		// 	//slot: 'c' // 插槽名
		// }
	]
	return column;
})

const listData1 = ref([
	{
		c_sort: 1,
		c_business_type: '零售',
		c_use_area: 2500,
		c_sale_vale: 88888,
		c_pecent: '11',
		c_pre_sale_value: 9999
	},
	{
		c_sort: 2,
		c_business_type: '餐饮',
		c_use_area: 1500,
		c_sale_vale: 2560,
		c_pecent: '15',
		c_pre_sale_value: 8940
	},
	{
		c_sort: 3,
		c_business_type: '体验',
		c_use_area: 266,
		c_sale_vale: 1870,
		c_pecent: '26',
		c_pre_sale_value: 9810
	},
	{
		c_sort: 4,
		c_business_type: '主力店',
		c_use_area: 840,
		c_sale_vale: 6870,
		c_pecent: '36',
		c_pre_sale_value: 1840
	},
	{
		c_sort: 5,
		c_business_type: '其他',
		c_use_area: 697,
		c_sale_vale: 4870,
		c_pecent: '16',
		c_pre_sale_value: 6870
	}
])
const listData2 = ref([
	{
		c_sort: 1,
		c_brand_name: '耐克',
		c_floor_name: '1F',
		c_counter_name: 'A001',
		c_use_area: 2500,
		c_sale_vale: 88888,
		c_pecent: '11',
		c_pre_sale_value: 9999
	},
	{
		c_sort: 2,
		c_brand_name: '阿迪',
		c_floor_name: '2F',
		c_counter_name: 'A002',
		c_use_area: 1500,
		c_sale_vale: 2560,
		c_pre_sale_value: 8940
	},
	{
		c_sort: 3,
		c_brand_name: '李宁',
		c_floor_name: '3F',
		c_counter_name: 'A003',
		c_use_area: 266,
		c_sale_vale: 1870,
		c_pre_sale_value: 9810
	},
	{
		c_sort: 4,
		c_brand_name: '安踏',
		c_floor_name: '4F',
		c_counter_name: 'A004',
		c_use_area: 840,
		c_sale_vale: 6870,
		c_pre_sale_value: 1840
	},
	{
		c_sort: 5,
		c_brand_name: '360',
		c_floor_name: '5F',
		c_counter_name: 'A005',
		c_use_area: 697,
		c_sale_vale: 4870,
		c_pre_sale_value: 6870
	}
])
const listData3 = ref([
	{
		c_sort: 1,
		c_business_type: '零售',
		c_use_area: 2500,
		c_sale_vale: 88888,
		c_growth_rate: '11',
		c_tb_sale_value: 9999
	},
	{
		c_sort: 2,
		c_business_type: '餐饮',
		c_use_area: 1500,
		c_sale_vale: 2560,
		c_growth_rate: '15',
		c_tb_sale_value: 8940
	},
	{
		c_sort: 3,
		c_business_type: '体验',
		c_use_area: 266,
		c_sale_vale: 1870,
		c_growth_rate: '26',
		c_tb_sale_value: 9810
	},
	{
		c_sort: 4,
		c_business_type: '主力店',
		c_use_area: 840,
		c_sale_vale: 6870,
		c_growth_rate: '36',
		c_tb_sale_value: 1840
	},
	{
		c_sort: 5,
		c_business_type: '其他',
		c_use_area: 697,
		c_sale_vale: 4870,
		c_growth_rate: '16',
		c_tb_sale_value: 6870
	}
])
const listData4 = ref([
	{
		c_sort: 1,
		c_brand_name: '耐克',
		c_floor_name: '1F',
		c_counter_name: 'A001',
		c_use_area: 2500,
		c_sale_vale: 88888,
		c_growth_rate: '11',
		c_tb_sale_value: 9999
	},
	{
		c_sort: 2,
		c_brand_name: '阿迪',
		c_floor_name: '2F',
		c_counter_name: 'A002',
		c_use_area: 1500,
		c_sale_vale: 2560,
		c_growth_rate: '13',
		c_tb_sale_value: 9999
	},
	{
		c_sort: 3,
		c_brand_name: '李宁',
		c_floor_name: '3F',
		c_counter_name: 'A003',
		c_use_area: 266,
		c_sale_vale: 1870,
		c_growth_rate: '11',
		c_tb_sale_value: 9999
	},
	{
		c_sort: 4,
		c_brand_name: '安踏',
		c_floor_name: '4F',
		c_counter_name: 'A004',
		c_use_area: 840,
		c_sale_vale: 6870,
		c_growth_rate: '11',
		c_tb_sale_value: 9999
	},
	{
		c_sort: 5,
		c_brand_name: '360',
		c_floor_name: '5F',
		c_counter_name: 'A005',
		c_use_area: 697,
		c_sale_vale: 4870,
		c_growth_rate: '11',
		c_tb_sale_value: 9999
	}
])
const listData5 = ref([]);
const listData6 = ref([]);
const chartStyle = ref("height: 500rpx;background: #FFFFFF");
const chartyData = ref([]);
const chartData = ref([]);
const colors = ref(['#02B7E6', '#FF9400', '#2789FF']);
const chartOption = computed(() => {
	return {
		// tooltip: {
		// 	trigger: 'axis',
		// 	axisPointer: {
		// 		type: 'cross'
		// 	}
		// },
		grid: {
			right: '20%'
		},
		legend: {
			data: ['销售额', '同比', '环比'],
			bottom: '5%',
			//selectedMode:false  //禁止点击图例
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					lineStyle: {
						color: '#CCCCCC'
					}
				},
				data: ['10月', '11月', '12月', '01月', '02月']
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '销售额',
				position: 'left',
				splitLine: {    //网格线
					lineStyle: {
						color: '#eeeeee',
						type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
					},
					show: true //隐藏或显示
				},
				alignTicks: false,
				axisLine: {
					show: false,
				},

			},
			{
				type: 'value',
				name: '同比',
				position: 'right',
				alignTicks: false,
				splitLine: {    //网格线
					lineStyle: {
						color: '#eeeeee',
						type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
					},
					show: true //隐藏或显示
				},
				offset: 30,
				axisLine: {
					show: false,
				}
			},
			{
				type: 'value',
				name: '环比',
				position: 'right',
				alignTicks: false,
				splitLine: {    //网格线
					lineStyle: {
						color: '#eeeeee',
						type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
					},
					show: true //隐藏或显示
				},
				axisLine: {
					show: false,
				}
			}
		],
		series: [
			{
				name: '销售额',
				type: 'bar',
				data: [
					2.0, 4.9, 7.0, 23.2, 25.6
				],
				itemStyle: {
					color: '#02B7E6'
				},
			},
			{
				name: '同比',
				type: 'line',
				yAxisIndex: 1,
				itemStyle: {
					color: '#FF9400'
				},
				data: [
					2.6, 5.9, 9.0, 6.4, 8.7
				]
			},
			{
				name: '环比',
				type: 'line',
				yAxisIndex: 2,
				itemStyle: {
					color: '#2789FF'
				},
				data: [2.0, 2.2, 3.3, 4.5, 6.3]
			}
		],
		tooltip: {
			trigger: 'item', // 触发方式为节点
			position: 'top',
			formatter: function (params) {
				return `销售额: ${params.data}`;
			},
		},
	}
});

onLoad(async () => {
	for (let i = 1900; i <= date.value.getFullYear(); i++) {
		beginYears.value.push(i)
		endYears.value.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		beginMonths.value.push(i)
		endMonths.value.push(i)
	}
	initDays(beginYear.value, beginMonth.value - 1, 'begin');
	initDays(endYear.value, endMonth.value, 'end');

	await getListData5(whereListData5.value);
	await getListData6(whereListData6.value);
})
const onSearch1 = async (whereList: any) => {
	whereListData1.value = whereList;
	//关键字    管易通运营综合视图
	//TODO  查询数据
}
const onSearch2 = async (whereList: any) => {
	whereListData2.value = whereList;
	//TODO  查询数据
}
const onSearch3 = async (whereList: any) => {
	whereListData3.value = whereList;
	//TODO  查询数据
}
const onSearch4 = async (whereList: any) => {
	whereListData4.value = whereList;
	//TODO  查询数据
}
const onSearch5 = async (whereList: any) => {
	whereListData5.value = whereList;
	await getListData5(whereListData5.value);
	//TODO  查询数据
}
const onSearch6 = async (whereList: any) => {
	whereListData6.value = whereList;
	await getListData6(whereListData6.value);
	//TODO  查询数据
}
const getListData5 = async (whereList: any) => {
	const result = await GetCountSalePSM(whereList)
	let mode = whereListData5.value.find(x => x.c_col == 'c_mode')?.c_value || '1'
	if (result) {
		listData5.value = result.map(x => {
			const buildName = x.c_building_name ? x.c_building_name + '-' : '';
			return {
				...x,
				c_type_name: mode === '1' ? x.c_dim_name : buildName + x.c_dim_name
			}
		})
	}
}
const getListData6 = async (whereList: any) => {
	const result = await GetCountSalePSM(whereList)
	let mode = whereListData6.value.find(x => x.c_col == 'c_mode')?.c_value || '1'
	if (result) {
		listData6.value = result.map(x => {
			const buildName = x.c_building_name ? x.c_building_name + '-' : '';
			return {
				...x,
				c_type_name: mode === '1' ? x.c_dim_name : buildName + x.c_dim_name
			}
		})
	}
}
const GetCountSalePSM = async (inputWhereList: any) => {
	let whereList = getWhereListReq(inputWhereList);
	const c_mode = whereList.find(x => x.c_col == 'c_mode')?.c_value || '1';
	const monthTemp = whereList.find(x => x.c_col == 'c_month')?.c_value || '1';
	const c_month = convertValue(map.value[monthTemp], 'YYYYMM');
	const req = {
		storeId: loginInfo.sUserStore,
		building: whereList.find(x => x.c_col == 'c_building')?.c_value || '',
		type: c_mode,
		month: c_month
	};
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await fcService.request('财务公共服务', 'GetCountSalePSM', req);
	uni.hideLoading();
	return res;
}
const tabChange = async (e) => {
	tabIndex.value = e;
	backToTop();
	switch (tabIndex.value) {
		case 0:
			//TODO  查询数据
			break;
		case 1:
			//TODO  查询数据
			break;
		case 2:
			//TODO  查询数据
			break;
	}
}
const backToTop = () => {
	uni.pageScrollTo({ scrollTop: 0 })
}
const iconClick = async () => {
	timeIcon.value = "icon-sanjiaojiantouxiangshang"
	timeSelectd.value = 0;
	beginYear.value = date.value.getFullYear();
	beginMonth.value = date.value.getMonth() + 1;
	beginDay.value = date.value.getDate();
	endYear.value = date.value.getFullYear();
	endMonth.value = date.value.getMonth() + 1;
	endDay.value = date.value.getDate();
	beginDateProp.value = [beginYear.value - 1900, beginMonth.value - 2, beginDay.value - 1];
	endDateProp.value = [endYear.value - 1900, endMonth.value - 1, endDay.value - 1]
	showBeginPicker.value = false;
	showEndPicker.value = false;
	beginTime.value = "";
	endTime.value = "";
	timePopup.value.open('bottom');
}

const getLastMonth = (i) => {
	const now = new Date();
	const year = now.getFullYear();
	const month = now.getMonth() + 1;
	const day = now.getDate();
	let startStop = new Array();
	let startTime = ""
	const nowMonthDay = new Date(year, month, 0).getDate() //当前月的总天数
	if (i == 12) {
		//如果是12月，年数往前推一年<br>
		startTime = year - 1 + "-" + month + "-" + day
	} else if (month - i <= 0) {
		// 如果前推i月小于0，年数往前推一年<br>
		startTime = year - 1 + "-" + 12 + "-" + day
	} else {
		const endTimeMonthDay = new Date(year, parseInt(month) - i, 0).getDate()
		if (endTimeMonthDay < day) {
			// i个月前所在月的总天数小于现在的天日期
			if (day < nowMonthDay) {
				// 当前天日期小于当前月总天数
				startTime = year + "-" + (month - i) + "-" + (endTimeMonthDay - (nowMonthDay - day))
			} else {
				startTime = year + "-" + (month - i) + "-" + endTimeMonthDay
			}
		} else {
			startTime = year + "-" + (month - i) + "-" + day
		}
	}
	startStop.push(new Date(startTime).format("yyyy-MM-dd"));
	startStop.push(now.format("yyyy-MM-dd")); //现在时间 
	return startStop;
}

const timeFixedClick = async (index) => {
	timeSelectd.value = index;
	showBeginPicker.value = false;
	showEndPicker.value = false;
	beginTime.value = "";
	endTime.value = "";
}

const closeDrawer = async () => {
	timeIcon.value = "icon-sanjiaojiantouxiangxia";
	timePopup.value.close();
	showBeginPicker.value = false;
	showEndPicker.value = false;
	beginTime.value = "";
	endTime.value = "";
}

const confirm = async (t) => {
	let { singleTag } = t;
	switch (singleTag) {
		case '确定':
			timeIcon.value = "icon-sanjiaojiantouxiangxia";

			if (timeSelectd.value === -1) {
				if (endTime.value === "") {
					uni.showToast({
						duration: 2000,
						icon: 'none',
						title: '请选择结束时间',
						mask: true,
					});
					return;
				}
				selectBeginDate.value = beginTime.value;
				selectEndDate.value = endTime.value;
			}
			else {
				setSelectTime();
			}
			selectTimeText.value = timeList.value.find(x => x.value === timeSelectd.value)?.text;
			timePopup.value.close();
			break;
	}
}

const setSelectTime = () => {
	switch (timeSelectd.value) {
		case 0:
			const last1Month = getLastMonth(1);
			selectBeginDate.value = last1Month[0];
			selectEndDate.value = last1Month[1];
			break;
		case 1:
			const last3Month = getLastMonth(3);
			selectBeginDate.value = last3Month[0];
			selectEndDate.value = last3Month[1];
			break;
		case 2:
			const last6Month = getLastMonth(6);
			selectBeginDate.value = last6Month[0];
			selectEndDate.value = last6Month[1];
			break;
		case 3:
			const last12Month = getLastMonth(12);
			selectBeginDate.value = last12Month[0];
			selectEndDate.value = last12Month[1];
			break;
	}
	beginTime.value = "";
	endTime.value = "";
	showBeginPicker.value = false;
	showEndPicker.value = false;
}

const selectBeginTime = () => {
	showBeginPicker.value = true;
	showEndPicker.value = false;
	beginTime.value = new Date(beginYear.value + '-' + (beginMonth.value - 1) + '-' + beginDay.value).format("yyyy-MM-dd");
	timeSelectd.value = -1;
}

const selectEndTime = () => {
	showBeginPicker.value = false;
	showEndPicker.value = true;
	endTime.value = new Date(endYear.value + '-' + endMonth.value + '-' + endDay.value).format("yyyy-MM-dd");
	timeSelectd.value = -1;
}

const initDays = (newYear, newMonth, type) => {
	let dlist = []
	if (newMonth === 1 || newMonth === 3 || newMonth === 5 || newMonth === 7 || newMonth === 8 || newMonth === 10 || newMonth === 12) {
		for (let i = 1; i <= 31; i++) {
			dlist.push(i)
		}
	}
	else if (newMonth === 4 || newMonth === 6 || newMonth === 9 || newMonth === 11) {
		for (let i = 1; i <= 30; i++) {
			dlist.push(i)
		}
	}
	else {
		for (let i = 1; i <= 28; i++) {
			dlist.push(i)
		}
		if (newYear % 4 == 0 && newYear % 100 != 0 || newYear % 400 == 0) {
			dlist.push(29)
		}
	}
	if (type === "begin") {
		beginDays.value = dlist
	}
	else {
		endDays.value = dlist
	}
}

const beginChange = (e) => {
	let valueArray = e.detail.value;
	beginDateProp.value = e.detail.value;
	beginYear.value = beginYears.value[valueArray[0]];
	beginMonth.value = beginMonths.value[valueArray[1]];
	initDays(beginYear.value, beginMonth.value, 'begin');
	beginDay.value = beginDays.value[valueArray[2]];
	beginTime.value = new Date(beginYear.value + '-' + beginMonth.value + '-' + beginDay.value).format("yyyy-MM-dd");
}

const endChange = (e) => {
	let valueArray = e.detail.value;
	endDateProp.value = e.detail.value;
	endYear.value = endYears.value[valueArray[0]];
	endMonth.value = endMonths.value[valueArray[1]];
	initDays(endYear.value, endMonth.value, 'end');
	endDay.value = endDays.value[valueArray[2]];
	endTime.value = new Date(endYear.value + '-' + endMonth.value + '-' + endDay.value).format("yyyy-MM-dd");
}

const getWhereListReq = (whereList: any) => {
	return whereList.map(x => {
		return {
			c_col: x.c_col,
			c_oper: x.c_oper,
			c_value: x.c_value,
			c_logic: x.c_logic
		}
	});
}
</script>

<style lang="scss">
@import '../../../main.scss';
@import '../../../uni.scss';
@import '../../../static/font/enjoyicon5.0/iconfont.css';

.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #F2F2F2;
	padding: 0px !important
}

.content-img {
	background-color: #FFFFFF;
	background-size: 100% 176rpx;
	background-repeat: no-repeat;
	width: 100%;
}

.navigation {
	flex: 0 0 auto;
	margin-bottom: 5px;
}

.popup-content-message {
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	padding: 0 20rpx 20rpx 20rpx;
	// width: 600rpx;
	background-color: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}

.popup-title {
	width: 100%;
	height: 84rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: $uni-text-color-secondary;
	font-size: $uni-font-size-level1;
	line-height: 45rpx;
	text-align: center;
	position: relative;
}

.popup-cancel {
	position: absolute;
	right: 32rpx;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
}

.popup-bottom {
	background: #ffffff;
	border-top: 1rpx solid $uni-line-color;
	display: flex;
	justify-content: center;
	padding: 20rpx;
}

.timeFlex {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 40rpx;
}

.time-all-box {
	display: flex;
	flex-wrap: wrap;
	padding: 28rpx;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	box-shadow: 0px 5px 5px 0px #CCCCCC;
	background: #ffffff;
	z-index: 9999;
}

.time-title {
	font-size: 28rpx;
	color: #888888;
	background: #ffffff;
	padding: 28rpx 0rpx 0rpx 28rpx;
}

.custom-time-title {
	font-size: 28rpx;
	color: #888888;
	background: #ffffff;
	padding: 0rpx 0rpx 0rpx 28rpx;
}

.time-fixed-item {
	flex: 1 1 calc(25% - 14px);
	max-width: 25%;
	box-sizing: border-box;
	background: #F9F9F8;
	border-radius: 100rpx;
	display: flex;
	/* 需要设置为flex来使align-items生效 */
	justify-content: center;
	/* 水平方向居中 */
	align-items: center;
	/* 垂直方向居中 */
	min-height: 26px;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #666666;
	text-align: center;

	&.active {
		font-weight: 500;
		color: #02B7E6;
		background: rgba(2, 183, 230, 0.1);
		border: 1px solid #02B7E6;
	}
}

.time-between {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #FFFFFF;
	padding: 28rpx;
}

.time-between-value {
	color: #CCCCCC;
	font-size: 36rpx;
	padding: 0rpx 29rpx 16rpx 29rpx;
	border-bottom: 2px solid #888888;
}


.picker-view {
	background: #ffffff;
	width: calc(100% - 200rpx);
	padding: 0px 100rpx;
	height: 200rpx;
}

.picker-item {
	line-height: 100rpx;
	text-align: center;
}

.custom-input {
	position: relative;
	display: inline-block;
}

.input-display {
	text-align: center;
	border: 1px solid #ccc;
	padding: 5px;
	outline: none;
}
</style>